<template>
	<div class="box-item">
		<a-form :model="formState" :label-col="{span:3}" :wrapper-col="{span:11}">
			<a-form-item label="分类">
				<a-select v-model:value="formState.category_id" placeholder="文章类别">
					<a-select-option v-for="(item,index) in classfiyData" :key="index"
						:value="item.id">{{item.name}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="文章标题">
				<a-input v-model:value="formState.title" />
			</a-form-item>
			<a-form-item label="摘要内容(选填)">
				<textarea v-model="formState.describe" name="" id="" cols="109" rows="2"></textarea>
			</a-form-item>
			<a-form-item label="封面">
				<!-- <urlImages :imgUrls="imgUrl" @imageUrl="imageUrl"></urlImages> -->
				<urlImages :num="1" :imgUrls="imgUrl" class="m-t-5" @updateImg="updateImg" @deleteImg="deleteImg"></urlImages>
			</a-form-item>
			<a-form-item label="详情">
				<Edicter v-if="showEdict" ref="edicts" :detailData="formState.content" @wChange="wChange"></Edicter>
			</a-form-item>
			<a-form-item label="是否显示">
				<a-select v-model:value="showText">
					<a-select-option value="1">显示</a-select-option>
					<a-select-option value="0">不显示</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item class="marginButton" :wrapper-col="{ span: 11, offset: 5 }">
				<a-button type="primary" @click="onSubmit">确定</a-button>
				<a-button style="margin-left: 10px" @click="cancel">取消</a-button>
			</a-form-item>
		</a-form>
	</div>
</template>
<script>
	import apiArticle from '../../../api/article.js'
	import Edicter from '../../../components/wangEditor.vue'
	import urlImages from '../../../components/upImage.vue'
	export default {
		components: {
			Edicter,
			urlImages
		},
		data() {
			return {
				showText: '1',
				showEdict: false,
				// 接受修改id值
				Id: this.$route.query.id,
				// 文章分类
				classfiyData: '',
				// 添加图片
				imgUrl: [],
				numberData: [],
				formState: {
					title: '',
					cover: 'https://gzy.data.gouziyuan.cn/gouziyuan/pic/202210/RYUw0IsjKEWXd6xi_www.gouziyuan.cn_185914.png',
					content: '',
					show: '',
					category_id: '',
				},

			}
		},
		/*页面离开的时候初始化创建详情*/
		beforeRouteLeave(to, form, next) {
			this.$refs.edicts.destroydd();
			next()
		},
		mounted() {
			this.getCartsData();
			if (this.$route.query.id) {
				this.articleChangeList();
			} else {
				this.showEdict = true
			}

		},
		methods: {
			// 获取文章分类
			getCartsData() {
				apiArticle.getCategorys().then(res => {
					this.classfiyData = res.result
				})
			},
			// 添加图片
			imageUrl(e) {
				this.formState.cover = e.imUrl;
			},
			// 添加编辑器
			wChange(e) {
				this.formState.content = e
			},
			// 获取修改数据，详情
			articleChangeList() {
				apiArticle.articleGetInfo(this.Id).then(res => {
					this.showEdict = true
					this.formState = res.result
					this.imgUrl.push({url:res.result.cover})
					/*转换是否选中*/
					let show = this.formState.show
					show = show == true ? '1' : '0';
					this.showText = show
				})
			},
			updateImg(e) {
				this.formState.cover = e.url
			},
			deleteImg(e){
			    this.formState.cover = ''
			},
			onSubmit() {
				this.formState.show = this.showText
				apiArticle.articleList(this.formState).then(res => {
					if (res.status === 1) {
						this.formState.show = this.showText
						this.$message.success('操作成功！');
						this.$router.go(-1)
					}
				})
			},
			cancel(){
				this.$router.go(-1)
			}
		}
	}
</script>
<style scoped>
	.box-item {
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: #393D49; */
	}

	.ant-form {
		width: 100%;
	}

	.ant-span {
		padding: 5px;
		background-color: #F0AD4E;
		border-radius: 6px;
	}

	.ant-spanTwo[data-v-10f1d219] {
		display: inline-block;
		width: 80px;
		height: 28px;
		border-radius: 6px;
	}

	.photos img {
		width: 50px;
		height: 50px;
	}

	.marginButton {
		margin-left: -125px;
	}
</style>